<template>
    <div>
        <h4>发表评论---{{newsid}}</h4>
        <hr>
        <textarea placeholder="请输入评论内容(最多吐槽120字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>
        <!-- 评论列表区域 -->
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in cmtlist" :key="i">
                <div class="cmt-item-title">第{{i+1}}楼&nbsp;用户:{{item.user_name}}&nbsp;发表时间:{{item.add_time | dateFormat}}</div>
                <div class="cmt-item-body">{{item.content}}</div>
            </div>

        </div>
        <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
    </div>
</template>

<script>
//按需从Mint-ui中导出需要的弹框组件
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
            page: 1,  //默认展示第一页的评论
            cmtlist: [], //评论数组
            msg: '' //即将发表的评论内容
        }
    },
    created(){
        this.getCommentByPage();
    },
    methods:{
        async getCommentByPage(){
            //根据页数来获取评论的数据
            const {data} = await this.$http.get("http://api.cms.liulongbin.top/api/getcomments/" + this.newsid + '?pageindex=' + this.page);
            if(data.status === 0) return (this.cmtlist = this.cmtlist.concat(data.message));//将之前加载的评论数组和重新加载的评论数组进行拼接
        },
        loadMore(){
            //点击加载更多的评论
            //当触发加载更多方法时，页码应该 +1 之后再调用getCommentByPage方法
            this.page++;
            this.getCommentByPage();
        },
        async postMsg(){
            //点击发表内容
            if(this.msg.trim().length <= 0){  //trim()去掉空白字符
                return Toast('不能提交空的评论内容')
            }else{
                const {data} = await this.$http.post("http://api.cms.liulongbin.top/api/postcomment/" + this.newsid,{content:this.msg.trim()});
                if(data.status === 0){
                    //提交成功后刷新评论列表
                    //获取评论之前先把评论列表清空
                    // this.cmtlist = [];
                    // this.getCommentByPage();

                    //为了防止重新调用获取评论方法时会把之前所有评论清空的问题，在客户端手动拼接评论对象并添加到cmtlist中
                    this.cmtlist.unshift({user_name:'匿名用户',add_time:new Date(),content:this.msg.trim()});
                    this.msg = '';
                }
            };
        }
    },
    props:['newsid']  //接收父组件传递过来的新闻id
}
</script>

<style lang="scss" scoped>
    textarea{
        font-size: 14px;
        margin: 0;
    }
    .cmt-list{
        margin-top: 4px;
        .cmt-item{
            line-height: 30px;
            .cmt-item-title{
                font-size: 14px;
                background-color: #ddd;
            }
            .cmt-item-body{
                font-size: 13px;
                text-indent: 2em;
            }
        }
    }
</style>